<template>
  <div>
    <WangToolbar
      border-b
      bc-ccc
      :editor="editorRef"
      :default-config="toolbarConfig"
    />
    <WangEditor
      style="height: 200px"
      :default-config="editorConfig"
      @on-created="handleCreated"
      v-model="valueHtml"
    />
  </div>
</template>

<script setup>
import { watch } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import {
  Editor as WangEditor,
  Toolbar as WangToolbar,
} from '@wangeditor/editor-for-vue'

const editorRef = shallowRef()

const props = defineProps(['value'])
const emit = defineEmits(['update:value'])

const toolbarConfig = { excludeKeys: 'fullScreen' }
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
const valueHtml = ref(props.value)

watch(
  () => valueHtml.value,
  () => {
    emit('update:value', valueHtml.value)
  }
)

const handleCreated = (editor) => {
  editorRef.value = editor
}
</script>
